<template>
    <transition name="password-popup">
        <div class="confirm" v-show="showFlag">
            <div class="confirm-wrapper">
                <svg class="close-icon" aria-hidden="true" @click.stop="cancel">
                    <use xlink:href="#icon-photo-close"></use>
                </svg>
                <div class="confirm-content">
                    <img :src="recinfo.info.pic" alt="">
                    <div class="opt-btn" @click="createOrder">确认领取</div>
                </div>
            </div>
            <confirm ref="cancel" text="是否放弃参加活动?" confirmBtnText="忍痛放弃" cancelBtnText="我再想想" @confirm="hide" />
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import Confirm from "../common/confirm";
export default {
    props: {
        recinfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {
        Confirm,
    },
    computed: {
        systemId() {
            return this.$store.state.login.system;
        },
    },
    data() {
        return {
            showFlag: false,
            password: '',
            isFocus: false, // input 是否获取焦点
        };
    },
    methods: {
        show() {
            this.showFlag = true;
        },
        hide() {
            this.showFlag = false;
        },
        cancel() {
            this.$emit('cancel')
            this.$refs.cancel.show()
        },
        createOrder() {
            let requestArr = [];
            let requestJson = {};
            requestJson.buyid = this.recinfo.info.buyid;
            requestJson.gid = this.recinfo.info.gid;
            requestJson.num = 1;
            requestArr.push(requestJson);
            let orderData = {
                data: requestArr,
                type: this.systemId,
                tickt_id: this.recinfo.ticket
            };
            console.log("requestJson", requestJson, requestArr);
            this.$store.commit("dataCreateOrder", orderData);
            this.$router.push({
                name: "order-created"
            });
        },
    },
    watch: {
        showFlag() {

        },

    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/main.styl';

.confirm {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);

    &.confirm-fade-enter-active {
        animation: confirm-fadein 0.3s;

        .confirm-content {
            animation: confirm-zoom 0.3s;
        }
    }

    .confirm-wrapper {
        width: 80vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // background-color: grayF;
        border-radius: main-radius;
        padding-top: smallMargin;

        .confirm-content {
            width: 100%;

            img {
                width: 60vw;
                height: 60vw;
                border-radius: main-radius;
                z-index: 9;
            }

            /* border-top 1px solid #f8f8f8 */
            .opt-btn {
                position: absolute;
                word-vw(word12, gray9);
                line-height: vw(16);
                margin-top: vw(15);
                secondary-solid();
                margin-left: 30%;
            }
        }

        .close-icon {
            position: absolute;
            top: -30%;
            right: 5%;
            width: vw(35);
            height: vw(35);
            overflow: hidden;
            fill: gray3;
        }
    }
}

@keyframes confirm-fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes confirm-zoom {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
</style>
